<template>
	<view class="newAddress">
			<view class="item">
				<text>收货人</text>
				<input type="text" v-model="name" placeholder="输入收货人"/>
			</view>
			<view class="item">
				<text>手机号码</text>
				<input type="text" v-model="mobile" placeholder="输入收货人手机号码"/>
			</view>
			<view class="item">
				<text>选择地区</text>
				<view class="right" @click="show = true">
					<input type="text" v-model="address" placeholder="选择地区" :disabled="true"/>
					<u-icon name="arrow-right" color="@333" size="24"></u-icon>
				</view>
			</view>
			<view class="addressTxt">
				<text>详细地址</text>
				<view class="right-input">
					<u-input v-model="addressTxt" type="textarea"  placeholder="输入详细地址"/>
				</view>
			</view>
			<view class="checkbox">
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="circle" active-color="#D1AA56">设置为默认地址</u-checkbox>
				</u-checkbox-group>
			</view>
			<button class="btn" @click="saveAddress">保存</button>
			<view class="popup">
				<u-picker v-model="show" mode="region" @confirm="onAddress" @cancel="show = false" confirm-color="#D1AA56"></u-picker>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				mobile:'',
				address:'',
				addressTxt:'',
				show:false,
				checked:false,
				province:'',
				city:'',
				district:'',
				addressIndex:0,
				address_id:''
			}
		},
		onLoad(option) {
			if (option.addressIndex !== undefined) {
				this.addressIndex = option.addressIndex
				this.getAddressList()
			}
		},
		methods: {
			//请求地址列表
			getAddressList(){
				uni.request({
				    url:this.$Url +'/index.php/App/Users/userAddressList',
				    method:'POST',
				    data:{
				       
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
				       this.addressArr = res.data.data[this.addressIndex]
					   this.address_id = this.addressArr.address_id
					   // this.name = 
					   this.name = this.addressArr.consignee
					   this.mobile = this.addressArr.mobile
					   this.province = this.addressArr.province_name
					   this.city = this.addressArr.city_name
					   this.district = this.addressArr.district_name
					   this.addressTxt = this.addressArr.address
					   this.address = this.province + '-' + this.city + '-' + this.district
						if (this.addressArr.is_default == 0) {
							this.checked = false
						} else{
							this.checked = true
						}
				    }
				})
			},
			//选择地址
			onAddress(e){
				this.address = e.province.label + '-' + e.city.label + '-' + e.area.label
				this.province = e.province.label
				this.city = e.city.label
				this.district = e.area.label
			},
			//保存地址
			saveAddress(){
				let is_default = 0
				if(this.checked == false){
					is_default = 0
				}else{
					is_default = 1
				}
				uni.request({
				    url:this.$Url +'/index.php/App/Users/updateUserAddress',
				    method:'POST',
				    data:{
						id:this.address_id,
				       consignee:this.name,
					   mobile:this.mobile,
					   province:this.province,
					   city:this.city,
					   district:this.district,
					   address:this.addressTxt,
					   is_default:is_default
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if(res.data.status == 200){
							uni.showToast({
								title:'保存成功',
							})
							uni.redirectTo({
								url:'../addminAddress'
							})
						}
				    }
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.newAddress{
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
		.item{
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			margin-top: 20upx;
			text{
				font-size: 30upx;
				color: #333;
				margin-left: 35upx;
			}
			input{
				width: 460upx;
				font-size: 30upx;
				color: #444;
			}
			.right{
				width: 430upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-right: 30upx;
				input{
					width: 400upx;
				}
			}
		}
		.item:first-child{
			margin-top: 0;
		}
		.addressTxt{
			background-color: #fff;
			margin-top: 20upx;
			display: flex;
			padding-top: 30upx;
			justify-content: space-between;
			text{
				font-size: 30upx;
				color: #333;
				margin-left: 35upx;
			}
			.right-input{
				width: 460upx;
				height: 200upx;
			}
		}
		.checkbox{
			height: 100upx;
			padding-left: 35upx;
			display: flex;
			align-items: center;
			background-color: #fff;
			margin-top: 20upx;
		}
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			border: none;
			background-color: #dbb769;
			width: 260upx;
			height: 75upx;
			border-radius: 80upx;
			color: #fff;
			margin-top: 80upx;
		}
}
</style>
